﻿@page "/tab"
@inject IStringLocalizer<Tabs> Localizer
@inject ToastService ToastService

<h3>@Localizer["TabsTitle"]</h3>

<h4>@Localizer["TabsSubTitle"]</h4>

<p>@((MarkupString)Localizer["TabsDescription"].Value)</p>

<Tips>
    <p>
        @((MarkupString)Localizer["TabsTipsTitle"].Value)
        <ul class="ul-demo mb-3">
            <li>@Localizer["TabsTips1"]</li>
            <li>@Localizer["TabsTips2"]</li>
        </ul>
        <div>@((MarkupString)Localizer["TabsTips3"].Value)</div>
    </p>
    <p>@Localizer["TabsTips4"]</p>
</Tips>

<p>
    <b>@Localizer["TabsInfoTitle"]</b>
</p>

<ul class="ul-demo">
    <li>@((MarkupString)Localizer["TabsInfoItem2"].Value)</li>
    <li>@((MarkupString)Localizer["TabsInfoItem4"].Value)</li>
</ul>

<p class="mt-3">
    <b>@Localizer["TabsQATitle"]</b>
</p>

<ul class="ul-demo">
    <li>@((MarkupString)Localizer["TabsQA1"].Value)</li>
    <li>@((MarkupString)Localizer["TabsQA2"].Value)</li>
</ul>

<Pre class="mt-3">[CascadingParameter]
[NotNull]
public Tab? TabSet { get; set; }

[CascadingParameter]
[NotNull]
public TabItem? TabItem { get; set; }</Pre>

<ul class="ul-demo mt-3">
    <li>@((MarkupString)Localizer["TabsQA3"].Value)</li>
    <li>@((MarkupString)Localizer["TabsQA4"].Value)</li>
</ul>

<Pre class="mb-3">&lt;TabLink Text="TabItem-Text" Url="/url" Icon="fa-solid fa-font-awesome">Link&lt;/TabLink&gt;</Pre>

<Pre>[Inject]
[NotNull]
private IServiceProvider? ServiceProvider { get; set; }

[Inject]
[NotNull]
private NavigationManager? NavigationManager { get; set; }

private void Navigation()
{
    NavigationManager.NavigateTo(ServiceProvider, url: "url", text: "text", icon: "icon", closable: true);
}
</Pre>

<DemoBlock Title="@Localizer["TabsNormalTitle"]" Introduction="@Localizer["TabsNormalIntro"]" Name="Normal">
    <Tab>
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsCardTitle"]" Introduction="@Localizer["TabsCardIntro"]" Name="IsCard">
    <Tab IsCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsBorderTitle"]" Introduction="@Localizer["TabsBorderIntro"]" Name="IsBorderCard">
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsIconTitle"]" Introduction="@Localizer["TabsIconIntro"]" Name="Icon">
    <Tab IsCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsClosableTitle"]" Introduction="@Localizer["TabsClosableIntro"]" Name="Closable">
    <Tips class="mb-3">
        @((MarkupString)Localizer["TabsClosableTips"].Value)
    </Tips>
    <Tab IsCard="true" ShowClose="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user" Closable="false">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsPlacementTitle"]" Introduction="@Localizer["TabsPlacementIntro"]" Name="Placement">
    <p class="text-center">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Top)">Top</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Right)">Right</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Bottom)">Bottom</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Left)">Left</button>
        </div>
    </p>
    <Tab Placement="@BindPlacement" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
    <Divider Text="@Localizer["DividerText"]"></Divider>
    <Tab Placement="@BindPlacement" IsCard="true" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
    <Divider Text="@Localizer["DividerText"]"></Divider>
    <Tab Placement="@BindPlacement" IsBorderCard="true" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsAddTabItemTitle"]" Introduction="@Localizer["TabsAddTabItemIntro"]" Name="AddTabItem">
    <section ignore class="mb-3">
        <Button Icon="fa-solid fa-circle-plus" OnClickWithoutRender="@(() => AddTab(TabSet))" Text="@Localizer["AddButtonText"]">
        </Button>
        <Button Color="Color.Danger" Icon="fa-solid fa-circle-minus" IsDisabled="@RemoveEnabled" OnClickWithoutRender="@(() => RemoveTab(TabSet))" Text="@Localizer["RemoveButtonText"]">
        </Button>
        <Button Icon="fa-solid fa-font-awesome" OnClickWithoutRender="@(() => Active(TabSet))" Text="@Localizer["ActiveButtonText"]">
        </Button>
    </section>
    <Tab IsBorderCard="true" Placement="Placement.Bottom" @ref="TabSet">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsComponentTitle"]"
           Introduction="@Localizer["TabsComponentIntro"]"
           Name="Component">
    <section ignore class="mb-3">
        @((MarkupString)Localizer["TabsComponentDescription"].Value)
    </section>
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsDynamicTabItemTitle"]"
           Introduction="@Localizer["TabsDynamicTabItemIntro"]"
           Name="DynamicTabItem">
    <section ignore class="mb-3">
        @((MarkupString)Localizer["TabsDynamicTabItemDescription"].Value)
    </section>
    <div class="dynamic-tab">
        <Layout SideWidth="120px">
            <Header>
                <div class="header">@Localizer["Block9Div"]</div>
            </Header>
            <Side>
                <div style="border-right: 1px solid #e6e6e6; height: 100%; overflow: auto; padding: 1rem 0; background-color: #f8f9fa;">
                    <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" @ref="TabMenu" />
                </div>
            </Side>
            <Main>
                <div class="tab-main-demo">
                    <Tab @ref="TabSetMenu" ShowClose="true">
                    </Tab>
                </div>
            </Main>
        </Layout>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsAppTitle"]" Introduction="@Localizer["TabsAppIntro"]" Name="App">
    <section ignore>
        <Tips class="mb-3">
            <div>@((MarkupString)Localizer["TabsAppDescription"].Value)</div>
        </Tips>
        <button type="button" class="btn btn-outline-primary" @onclick="@AddTab">
            <i class="fa-solid fa-circle-plus"></i>
            <span>@Localizer["AddButtonText"]</span>
        </button>
        <button type="button" class="btn btn-outline-danger" disabled="@((TabSetApp?.Items.Count() > 4) ? null : "disabled")" @onclick="@RemoveTab">
            <i class="fa-solid fa-circle-minus"></i>
            <span>@Localizer["RemoveButtonText"]</span>
        </button>
    </section>

    <Tab ShowExtendButtons="ShowButtons" ShowClose="true" @ref="TabSetApp" class="mt-3">
        <TabItem Text="@Localizer["TabItem1Text"]" Closable="false">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsIsOnlyRenderActiveTitle"]" Introduction="@Localizer["TabsIsOnlyRenderActiveIntro"]" Name="IsOnlyRenderActive">
    <Tab IsBorderCard="true" IsOnlyRenderActiveTab="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsLazyLoadTitle"]" Introduction="@Localizer["TabsLazyLoadIntro"]" Name="IsLazyLoadTabItem">
    <Tab IsBorderCard="true" IsLazyLoadTabItem="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsHeaderTemplateTitle"]" Introduction="@Localizer["TabsHeaderTemplateIntro"]" Name="HeaderTemplate">
    <Tab IsBorderCard="true" @ref="TabSetTemplate">
        <TabItem>
            <HeaderTemplate>
                <div class="@GetClassString(context)" @onclick="() => OnClickTabItem(context)">
                    <i class="fa-solid fa-tv"></i>
                    <span class="mx-2">@Localizer["BlockHeaderTemplateHeaderText"]</span>
                    <Badge Color="Color.Danger" style="position: absolute; right: 2px; top: 2px;">9</Badge>
                </div>
            </HeaderTemplate>
            <ChildContent>
                <div>@((MarkupString)Localizer["BlockHeaderTemplateDesc"].Value)</div>
            </ChildContent>
        </TabItem>
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsSetHeaderTemplateTitle"]" Introduction="@Localizer["TabsSetHeaderTemplateIntro"]" Name="OnSetTitle">
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
        <TabItem Text="@TabItemText">
            <DemoTabItem OnSetTitle="@OnSetTitle" />
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsSetTabItemHeaderTextTitle"]" Introduction="@Localizer["TabsSetTabItemHeaderTextIntro"]" Name="SetTabItemHeaderText">
    <Tab IsBorderCard="true">
        <TabItem Text="Text">
            <DemoTabItemSetText />
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsDragTitle"]" Introduction="@Localizer["TabsDragIntro"]" Name="AllowDrag">
    <Tab IsBorderCard="true" AllowDrag="true">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />

<MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />
